<template>
  <div class="mod-configs">
    <el-table
      :data="dataList"
      @sort-change='sort_change'
      :max-height="tableHeight"
      :header-cell-style="{background:'#F5F7FA'}"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <!-- <el-table-column
        type="index"
        label="序号"
        width="60">
      </el-table-column> -->
      <el-table-column
        prop="status"
        align="center"
        min-width="75"
        sortable='custom'
        :formatter="dateFormats"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.warning">
            <!-- <el-tooltip placement="top">三个月快到期</el-tooltip> -->
            快到期
          </span>
          <span v-else-if="scope.row.disable">
            <!-- <el-tooltip placement="top">已过期</el-tooltip> -->
            已逾期
          </span>
          <span v-else>
            <!-- <el-tooltip placement="top">未到期</el-tooltip> -->
            未到期
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        min-width="80"
        align="center"
        sortable='custom'
        label="姓名">
      </el-table-column>
      <!-- <el-table-column
        prop="idCard"
        min-width="180"
        sortable='custom'
        label="身份证号">
      </el-table-column> -->
      <el-table-column
        prop="mobile"
        min-width="120"
        align="center"
        sortable='custom'
        :formatter="dateFormats"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="idType"
        sortable='custom'
        align="center"
        min-width="120"
        :formatter="dateFormats"
        label="证书类型">
      </el-table-column>
      <el-table-column
        prop="profession"
        min-width="170"
        align="center"
        sortable='custom'
        :formatter="dateFormats"
        label="证书专业">
      </el-table-column>
      <el-table-column
        prop="certificateNo"
        sortable='custom'
        align="center"
        min-width="160"
        :formatter="dateFormats"
        label="证书编号">
      </el-table-column>
      <el-table-column
        prop="validityEndTime"
        sortable='custom'
        align="center"
        min-width="120"
        label="证书到期日期"
        :formatter="dateFormats">
      </el-table-column>
       <el-table-column
        min-width="210"
        align="center"
        label="延期">
        <template slot-scope="scope">
          <el-button v-if="isAuth('certificate:certificateRenewalInfo:info')" class="button-s" type="text" style="color:#6E92E9;" size="mini" @click="addOrUpdateHandle(scope.row)">查看</el-button>
          <span style="color:#E8E8E8;">|</span>
          <el-button v-if="isAuth('certificate:certificateRenewalInfo:info')" class="button-s" type="text" style="color:#6E92E9;" size="mini" @click="addOrUpdatePostpones(scope.row)">延期</el-button>
          <span style="color:#E8E8E8;">|</span>
          <el-button v-if="isAuth('certificate:certificateRenewalInfo:list')" class="button-s" type="text" style="color:#6E92E9;" size="mini" @click="addOrUpdatePostpone(scope.row)">延期攻略</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 呈现 延期攻略 -->
    <el-dialog
    :visible.sync="centerDialogVisible"
    width="70%"
    center>
    <span>
    <div class="ql-editor" v-html="this.articleData.content"></div>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="centerDialogVisible = false">关 闭</el-button>
      <!-- <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button> -->
    </span>
    </el-dialog>
    <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next,  sizes, jumper">
    </el-pagination>
    <!-- 延期 -->
    <el-dialog
    title="延期证书"
    :visible.sync="dialogPostPones"
    width="50%"
    >
   <span>
    <el-form :model="form" ref="form" :rules="dataRule" label-width="140px">
        <el-row>
          <el-col :span="12" class="ell-form-item">
            <el-form-item label="新有效期开始时间:" prop="validityStartTime">
              <el-date-picker type="date" v-model="form.validityStartTime" placeholder="选择有效期开始时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="ell-form-item">
            <el-form-item label="新有效期结束时间:" prop="validityEndTime">
              <el-date-picker type="date" v-model="form.validityEndTime" placeholder="选择有效期结束时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
            <el-col :span="12" class="ell-form-item">
            <el-form-item label="延期时间:" prop="renewalTime">
              <el-date-picker type="date" v-model="form.renewalTime" placeholder="选择延期时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="ell-form-item">
            <el-form-item label="延期费用:" prop="renewalFee">
                <el-input v-model="form.renewalFee" placeholder="请填写延期费用"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:" prop="remark">
              <el-input type="textarea" :rows="5" v-model="form.remark" placeholder="请填写延期相关的情况说明"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
     </el-form>
   </span>
   <span slot="footer" class="dialog-footer">
    <el-button @click="dialogPostPones = false">取 消</el-button>
    <el-button type="primary" @click="clickPostPones()">确 定</el-button>
  </span>
</el-dialog>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>
<script type="text/javascript">
$(function() {
($("#content1").text());
})
</script>
<script>
  import 'quill/dist/quill.snow.css'
  import merge from 'lodash/merge'
  import AddOrUpdate from './certifirenewal-info'
  import CertificateDetail from '../certinfo/certificate-list-detail'
  export default {
    props: {
      params: {
        type: Object
      },
      months:{
        type: Number
      }
    },
    data () {
      return {
        heightis: 347,
        dataForm: {
          key: ''
        },
        dataRow:{},
        form:{
        renewalTime:'',
        validityStartTime:'',
        validityEndTime:'',
        remark:'',
        renewalFee:''
        },
        centerDialogVisible:false,
        dataList: [],
        articleData:{
          title:'',
          content:''
        },
        dataRule: {
          renewalTime: [
            { required: true, message: '选择延期时间', trigger: 'blur'}
          ],
          validityStartTime: [
            { required: true, message: '选择有效期开始时间', trigger: 'blur'}
          ],
          validityEndTime: [
            { required: true, message: '选择有效期结束时间', trigger: 'blur'}
          ],
          renewalFee:[
            { required: true, message: '请填写延期费用', trigger: 'blur'},
          ]
        },
        tableHeight:0,
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        validityType:'',
        dialogPostPones:false,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        type: '',
        tenantId: '',
        orderBy:'',
        inOrder:''
      }
    },
    components: {
      AddOrUpdate
    },
    mounted() {
    // this.$nextTick(() => {
    //         this.tableHeight = window.innerHeight - 310;
    //         //后面的50：根据需求空出的高度，自行调整
    //     })
    },
    watch: {
      // 回显时 做一下转换
      articleData: {
        deep: true,
        handler(val){
          if(val.content){
            var gt = new RegExp('&gt;', 'g')
            var lt = new RegExp('&lt;', 'g')
            val.content = val.content.replace(gt, '>')
            val.content = val.content.replace(lt, '<')
          }
        }
      }
    },
    created(){
      this.tackHeight()
    },
    methods: {
      unfoldHeight(){
      this.heightis = 510
      this.adjustTableHeight()
      console.log(this.heightis);
      },
      tackHeight(){
      this.heightis = 352
      this.adjustTableHeight()
      },
      adjustTableHeight(){
      this.$nextTick(() => {
            this.tableHeight = window.innerHeight - this.heightis;
            //后面的50：根据需求空出的高度，自行调整
        })
      },
      dateFormats(row, column, cellValue, index){
      if (!Boolean(cellValue)) {
                return "-";
            } else {
                return cellValue;
            }
      },
      // 延期
      clickPostPones(){
        // this.dataRow = row
      // if(this.form.renewalTime === ''){
      //   return
      // }else{
      this.$refs.form.validate(valid=>{
      if(valid){
      this.$http({
              url: this.$http.adornUrl('/certificate/certificateRenewalInfo/save'),
              method: 'post',
              data: this.$http.adornData({
                'certificateId': this.dataRow.id,
                'tenantId': this.dataRow.tenantId,
                'renewalTime': this.$dateFormat(this.form.renewalTime),
                'validityStartTime': this.$dateFormat(this.form.validityStartTime),
                'validityEndTime': this.$dateFormat(this.form.validityEndTime),
                'remark': this.form.remark,
                'renewalFee':this.form.renewalFee
                // 'contractPic': contractPics.join(",")
              })
            }).then(({data}) => {
              // console.log(1);
              if (data.code === 0) {
                // console.log(2);
              this.$message.success("延期成功")
              this.dialogPostPones = false
              this.getDataList()
              }else{
              this.$message.error("延期失败")
              }
            })
      }
            })
      },
      sort_change(column){
      this.orderBy = column.prop
      if(column.order =='ascending'){
        this.inOrder = 'asc'
      }
      if(column.order =='descending'){
        this.inOrder = 'desc'
      }
      this.getDataList()
      },
      dateFormat (row, column, cellValue, index) {
        return cellValue ? cellValue.substring(0, 10) : ''
      },
      // deleteDialog(){
      // if(this.articleData.content == ''){
      // this.centerDialogVisible = false
      // }
      // },
      addOrUpdatePostpone(row){
        // console.log(row)
          this.$http({
          url: this.$http.adornUrl('/sys/education/getDetail/'),
          method: 'get',
          params: this.$http.adornParams({
          'name':row.idType,
          'type':row.pidType
          })
        }).then(({data}) => {
          if (data.code === 0) {
          this.articleData = data.data
          if(data.data == ''){
          this.centerDialogVisible = false
          }else{
          this.centerDialogVisible = true
          }
          if(data.data[0]){
          this.articleData = data.data[0]
          // this.isEdit = true
          }else{
            this.articleData.content = ''
            // this.isEdit = false
          }
          } else {
          this.$message.error.data.msg
          }
        })
      },
      init (type, tenantId) {
        this.type = type || ''
        this.tenantId = tenantId
        this.getDataList()
      },
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/list'),
          method: 'get',
          params: this.$http.adornParams(merge(this.params, {
            'page': this.pageIndex,
            'limit': this.pageSize,
            // 'type': this.type,
            'type': this.type === 'all' ? '' : this.type,
            'tenantId': this.tenantId,
            'months':this.months,
            'orderBy': this.orderBy,
            'inOrder': this.inOrder
          }))
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log(data)
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      getDataListList(){
      this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/list'),
          method: 'get',
          params: this.$http.adornParams({
          'certificateType':this.params.certificateType,
          'status':this.params.status,
          'keepDeptId':this.params.keepDeptId,
          'name':this.params.name,
          'pidType':this.params.pidType,
          'profession':this.params.profession,
          'idType':this.params.idType,
          'idCard':this.params.idCard,
          'registerType':this.params.registerType,
          'certificateNo':this.params.certificateNo,
          'mobile':this.params.mobile,
          'academic':this.params.academic,
          'releaseTime':this.$dateFormat(this.params.releaseTime),
          'validityEndTime':this.$dateFormat(this.params.validityEndTime),
          'validityType':this.params.validityType,
            'page': 1,
            'limit': this.pageSize,
            // 'type': this.type,
            'type': this.type === 'all' ? '' : this.type,
            'tenantId': this.tenantId,
            'months':this.months
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log(data)
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      addOrUpdateHandle (row) {
        this.$emit('clickCertificateListVisible',row)
        // this.addOrUpdateVisible = true
        // this.$nextTick(() => {
        //   this.$refs.addOrUpdate.init(id)
        // })
      },
      addOrUpdatePostpones(row){
      this.dataRow = row
      this.form.renewalTime = '',
      this.form.validityStartTime = '',
      this.form.validityEndTime = '',
      this.form.remark = '',
      this.form.renewalFee = '',
      this.dialogPostPones = true
      }
    }
  }
</script>
<style lang="scss" scoped>
 // 分页颜色控制
 .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #409EFF !important;
    color: #fff !important;
  }
  /deep/ .button-s{
  margin-left: 0px !important;
  }
  .ell-form-item {
      margin-bottom: 5px;
  }
  .iconPro {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  /deep/
.el-dialog__header{
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
.el-dialog__title{
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 20px !important;
}
}
  /deep/.el-tabs__header{
    margin-bottom: 0px !important;
  }
  /deep/ .el-table--scrollable-x .el-table__body-wrapper {
        overflow: auto !important;
    }
</style>
